<template>
  <div class="seabottom">
    <div class="flex Medium font_s22 JustifyContentSA">
      <div class="bottom_left flex JustifyContentC" style="padding-top: 1rem;">
        <p class="title_left" @click="model=true">社会组织总数</p>
        <p class="font_s19" style="color: #74F6FA;">2325</p>
      </div>
      <div class="bottom_right flex JustifyContentC" style="padding-top: 1rem;">
        <p class="title_right">业务主管总数</p>
        <p class="font_s19" style="color: #FFCE4B;">80</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'SeaBottom'
}
</script>
<style lang="scss" scoped>
.seabottom{
  width: 50%;
  position: absolute;
  bottom: 3%;
  left: 25%;
  .bottom_left{
    width: 15.5rem;
    height: 3.4375rem;
    background: url(../../assets/img/data/16.png) no-repeat;
    background-size: 100% 100%;
    .title_left{
      width:132px;
      font-weight:bold;
      color:rgba(74,74,74,1);
      text-shadow:0px 0px 10px rgba(5,9,51,0.75);
      background:linear-gradient(0deg,rgba(116,246,250,1) 0%, rgba(255,255,255,1) 100%);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
    }
  }
  .bottom_right{
    width: 15.5rem;
    height: 3.4375rem;
    background: url(../../assets/img/data/17.png) no-repeat;
    background-size: 100% 100%;
    .title_right{
      width:155px;
      font-weight:bold;
      color:rgba(74,74,74,1);
      text-shadow:0px 0px 10px rgba(5,9,51,0.75);
      background:linear-gradient(0deg,rgba(254,182,109,1) 0%, rgba(255,255,255,1) 100%);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
    }
  }
}
</style>
